<template>
	<view class="container">
		<!-- 顶部切换栏 -->
		<view class="switch-bar">
			<view class="switch-item" :class="{ active: viewType === 'week' }" @click="switchView('week')">
				<text>周视图</text>
			</view>
			<view class="switch-item" :class="{ active: viewType === 'day' }" @click="switchView('day')">
				<text>日视图</text>
			</view>
		</view>

		<!-- 日期选择器 -->
		<view class="date-picker">
			<view class="date-nav">
				<view class="prev-btn" @click="changeWeek(-1)">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
				<view class="current-date">
					<text>{{ currentDateRange }}</text>
				</view>
				<view class="next-btn" @click="changeWeek(1)">
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="weekday-header" v-if="viewType === 'day'">
				<view class="weekday-item" v-for="(day, index) in weekDays" :key="index"
					:class="{ 'selected': selectedDay === index }" @click="selectDay(index)">
					<text>{{ day }}</text>
					<text class="date-text">{{ getDayDate(index) }}</text>
				</view>
			</view>
		</view>

		<!-- 周视图 -->
		<view class="week-view" v-if="viewType === 'week'">
			<view class="timetable">
				<view class="timetable-header">
					<view class="time-column">时间</view>
					<view class="weekday-column" v-for="(day, index) in weekDays" :key="index">
						<text class="weekday">{{ day }}</text>
						<text class="date">{{ getDayDate(index) }}</text>
					</view>
				</view>
				<view class="timetable-body">
					<view class="time-row" v-for="time in timeSlots" :key="time.start">
						<view class="time-column">
							<text>{{ time.label }}</text>
						</view>
						<view class="weekday-column" v-for="(day, index) in 7" :key="index">
							<view v-if="getScheduleForTimeSlot(time.start, index)" class="course-block"
								:style="{ backgroundColor: getRandomColor() }">
								<text class="course-name">{{ getScheduleForTimeSlot(time.start, index).name }}</text>
								<text
									class="course-location">{{ getScheduleForTimeSlot(time.start, index).location }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 日视图 -->
		<view class="day-view" v-else>
			<view class="course-list">
				<view class="course-item" v-for="course in todayCourses" :key="course.id">
					<view class="course-time">
						<text class="start-time">{{ course.startTime }}</text>
						<text class="duration">{{ course.duration }}分钟</text>
					</view>
					<view class="course-detail">
						<text class="course-name">{{ course.name }}</text>
						<view class="course-info">
							<view class="location">
								<uni-icons type="location" size="14"></uni-icons>
								<text>{{ course.location }}</text>
							</view>
							<view class="teacher">
								<uni-icons type="person" size="14"></uni-icons>
								<text>{{ course.teacher }}</text>
							</view>
						</view>
					</view>
					<view class="course-status">
						<text :class="['status-tag', course.status]">{{ course.statusText }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				viewType: 'week',
				weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				currentWeek: 0,
				selectedDay: new Date().getDay() - 1,
				timeSlots: [{
						start: '08:00',
						end: '09:30',
						label: '08:00-09:30'
					},
					{
						start: '09:50',
						end: '11:20',
						label: '09:50-11:20'
					},
					{
						start: '13:30',
						end: '15:00',
						label: '13:30-15:00'
					},
					{
						start: '15:20',
						end: '16:50',
						label: '15:20-16:50'
					},
					{
						start: '18:30',
						end: '20:00',
						label: '18:30-20:00'
					}
				],
				schedule: [{
						day: 0,
						time: '08:00',
						name: '高等数学',
						location: 'A301',
						teacher: '张教授'
					},
					{
						day: 0,
						time: '09:50',
						name: '高等数学',
						location: 'A301',
						teacher: '张教授'
					},
					{
						day: 1,
						time: '09:50',
						name: '大学物理',
						location: 'B202',
						teacher: '李教授'
					},
					{
						day: 2,
						time: '13:30',
						name: '英语听力',
						location: 'C103',
						teacher: '王教授'
					}
				],
				todayCourses: [{
						id: 1,
						startTime: '08:00',
						duration: 90,
						name: '高等数学',
						location: 'A301',
						teacher: '张教授',
						status: 'completed',
						statusText: '已结束'
					},
					{
						id: 2,
						startTime: '09:50',
						duration: 90,
						name: '大学物理',
						location: 'B202',
						teacher: '李教授',
						status: 'ongoing',
						statusText: '进行中'
					},
					{
						id: 3,
						startTime: '13:30',
						duration: 90,
						name: '英语听力',
						location: 'C103',
						teacher: '王教授',
						status: 'upcoming',
						statusText: '即将开始'
					}
				]
			}
		},
		computed: {
			currentDateRange() {
				const today = new Date();
				const monday = new Date(today);
				monday.setDate(today.getDate() - today.getDay() + 1 + this.currentWeek * 7);
				const sunday = new Date(monday);
				sunday.setDate(monday.getDate() + 6);
				return `${monday.getMonth() + 1}月${monday.getDate()}日 - ${sunday.getMonth() + 1}月${sunday.getDate()}日`;
			}
		},
		methods: {
			switchView(type) {
				this.viewType = type;
			},
			changeWeek(delta) {
				this.currentWeek += delta;
			},
			getScheduleForTimeSlot(time, day) {
				return this.schedule.find(course => course.time === time && course.day === day);
			},
			getRandomColor() {
				const colors = ['course-blue', 'course-green', 'course-orange', 'course-purple', 'course-pink', 'course-cyan'];
				return `var(--${colors[Math.floor(Math.random() * colors.length)]})`;
			},
			selectDay(index) {
				this.selectedDay = index;
			},
			getDayDate(index) {
				const today = new Date();
				const monday = new Date(today);
				monday.setDate(today.getDate() - today.getDay() + 1 + this.currentWeek * 7);
				const targetDate = new Date(monday);
				targetDate.setDate(monday.getDate() + index);
				return `${targetDate.getDate()}日`;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}

	.switch-bar {
		display: flex;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 10rpx;
		margin-bottom: 20rpx;

		.switch-item {
			flex: 1;
			text-align: center;
			padding: 20rpx;
			border-radius: 8rpx;

			&.active {
				background-color: #4b7bec;
				color: #fff;
			}
		}
	}

	.date-picker {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.date-nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.current-date {
				font-size: 28rpx;
				color: #2d3436;
			}

			.prev-btn,
			.next-btn {
				padding: 10rpx;
			}
		}

		.weekday-header {
			display: flex;
			justify-content: space-around;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;

			.weekday-item {
				flex: 1;
				text-align: center;
				padding: 10rpx;
				border-radius: 8rpx;
				cursor: pointer;

				&.selected {
					background-color: #4b7bec;
					color: #fff;
				}

				text {
					display: block;
				}

				.date-text {
					font-size: 20rpx;
					margin-top: 4rpx;
					color: inherit;
				}
			}
		}
	}

	.week-view {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx;

		.timetable {
			width: 100%;

			.timetable-header {
				display: flex;
				border-bottom: 1px solid #eee;

				.time-column {
					width: 180rpx;
					text-align: center;
					padding: 20rpx;
					font-size: 24rpx;
					color: #636e72;
					font-weight: bold;
				}

				.weekday-column {
					flex: 1;
					text-align: center;
					padding: 20rpx;
					font-size: 24rpx;
					color: #636e72;

					.weekday {
						display: block;
						font-weight: bold;
						margin-bottom: 4rpx;
					}

					.date {
						display: block;
						font-size: 20rpx;
						color: #95a5a6;
					}
				}
			}

			.timetable-body {
				.time-row {
					display: flex;
					border-bottom: 1px solid #f5f5f5;
					min-height: 120rpx;

					.time-column {
						width: 180rpx;
						padding: 10rpx;
						text-align: center;
						font-size: 24rpx;
						color: #636e72;
					}

					.weekday-column {
						flex: 1;
						padding: 4rpx;

						.course-block {
							height: 100%;
							min-height: 100rpx;
							border-radius: 8rpx;
							padding: 10rpx;
							color: #fff;
							background-color: var(--course-blue);
							text-align: center;
							.course-name {
								font-size: 24rpx;
								margin-bottom: 8rpx;
								display: block;
							}

							.course-location {
								font-size: 20rpx;
								opacity: 0.8;
							}
						}
					}
				}
			}
		}
	}

	.day-view {
		.course-list {
			.course-item {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;

				.course-time {
					width: 140rpx;
					text-align: center;

					.start-time {
						font-size: 32rpx;
						color: #2d3436;
						display: block;
						margin-bottom: 8rpx;
					}

					.duration {
						font-size: 24rpx;
						color: #636e72;
					}
				}

				.course-detail {
					flex: 1;
					padding: 0 30rpx;

					.course-name {
						font-size: 32rpx;
						color: #2d3436;
						margin-bottom: 16rpx;
						display: block;
					}

					.course-info {
						display: flex;
						font-size: 24rpx;
						color: #636e72;

						.location,
						.teacher {
							display: flex;
							align-items: center;
							margin-right: 30rpx;

							text {
								margin-left: 8rpx;
							}
						}
					}
				}

				.course-status {
					.status-tag {
						padding: 8rpx 16rpx;
						border-radius: 30rpx;
						font-size: 24rpx;

						&.completed {
							background-color: #636e72;
							color: #fff;
						}

						&.ongoing {
							background-color: #4b7bec;
							color: #fff;
						}

						&.upcoming {
							background-color: #a5b1c2;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>